<script setup lang="ts" name="B35ComponentCommunicationMenu">
import { reactive } from "vue";
type RouteItem = { url: string; label: string };
const routes = reactive<RouteItem[]>([
  {
    url: "/props",
    label: "Props",
  },
  {
    url: "/event",
    label: "自定义事件",
  },
  {
    url: "/mitt",
    label: "Mitt",
  },
  {
    url: "/v-model",
    label: "v-model",
  },
  {
    url: "/attrs",
    label: "$attrs",
  },
  {
    url: "/refs-parent",
    label: "$refs、$parent",
  },
  {
    url: "/provide-inject",
    label: "provide与inject",
  },
  {
    url: "/pinia",
    label: "Pinia",
  },
  {
    url: "/slot",
    label: "插槽",
  },
]);
</script>
<template>
  <ul class="flex flex-col gap-y-3 list-decimal pl-4">
    <li v-for="r in routes" :key="r.url">
      <RouterLink
        class="px-1 py-0.5 rounded text-current block w-full hover:bg-red-200 active:bg-red-300"
        :to="r.url"
        active-class="bg-red-300"
        >{{ r.label }}</RouterLink
      >
    </li>
  </ul>
</template>
